<template>
    <div class="radius">
        <v-map
            ref="map"
            :positionList="positionList"
            searchSiteInputId="searchSite"
        >
            <div class="searchSite">
                请输入关键字：<input placeholder="请输入地址" id="searchSite" />
            </div>
        </v-map>
        <el-row class="lists">
            <el-col :span="8">
                <div class="list">
                    <h3>基站</h3>
                    <div class="scroll-wrap">
                        <ul>
                            <li
                                :class="{ active: index == currentSiteIndex }"
                                v-for="(item, index) in positionList"
                                :key="index"
                                @click="stationDetail(item, index)"
                            >
                                <p>
                                    <span>{{ index }}</span
                                    >{{ item.siteName }}
                                </p>
                                <p>
                                    {{ item.userCount }}人/{{ item.carCount }}辆
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="list">
                    <h3>人员</h3>
                    <div class="scroll-wrap">
                        <table>
                            <tr>
                                <th>姓名</th>
                                <th>工种</th>
                                <th>手机号</th>
                            </tr>
                            <tr v-for="(item, index) in userList" :key="index">
                                <td>{{ item.userName }}</td>
                                <td>
                                    {{ item.workType }}
                                </td>
                                <td>{{ item.phone }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="list">
                    <h3>车辆</h3>
                    <div class="scroll-wrap">
                        <table>
                            <tr>
                                <th style="width:100px">车牌号</th>
                                <th>单位</th>
                            </tr>
                            <tr v-for="(item, index) in carList" :key="index">
                                <td>{{ item.carNo }}</td>
                                <td>{{ item.companyName }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import VMap from "./v-map.vue";
import { getPositionList, stationDetail } from '@/api/station'
export default {
    name: 'positionManage',
    data () {
        return {
            that: this,
            currentSiteIndex: 0,
            positionList: [],
            userList: [],
            carList: [],
            workTypeOptions: []
        }
    },
    components: { VMap },
    created () {
        this.getDicts("work_type").then(response => {
            this.workTypeOptions = response.data;
        });
        this.getPositionList()
    },
    filters: {
        workTypeFilter (val, that) {
            for (let i = 0; i < that.workTypeOptions.length; i++) {
                if (val == that.workTypeOptions[i].dictValue) {
                    return that.workTypeOptions[i].dictLabel
                }
            }
        }
    },
    methods: {
        async getPositionList () {
            let res = await getPositionList()
            if (res.code == 200) {
                this.positionList = res.data
                if (this.positionList.length > 0) {
                    this.$nextTick(() => {
                        this.stationDetail(this.positionList[0], 0)
                    })
                }
            }
        },
        async stationDetail (item, index) {
            let params = {
                siteNo: item.siteNo
            }
            this.currentSiteIndex = index
            this.$refs.map.map && this.$refs.map.map.setCenter([item.lng, item.lat])
            let res = await stationDetail(params)
            if (res.code == 200) {
                this.userList = []
                this.carList = []
                res.data.forEach(item => {
                    if (item.userId) {
                        this.userList.push(item)
                    } else {
                        this.carList.push(item)
                    }
                });
            }
        }
    }
}
</script>
<style scoped>
.radius{
    height: calc(100vh - 120px);
    min-height: 100%;
    overflow-y: auto;
}
.searchSite {
    position: absolute;
    right: 130px;
    top: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    z-index: 2;
    padding: 10px;
    font-size: 14px;
    color: #666;
}
.searchSite input {
    border: none;
    outline: none;
    font-size: 14px;
    color: #666;
}
.lists {
    background: #f3f3f4;
    padding: 10px 0 10px 10px;
}
.lists .el-col {
    padding-right: 10px;
}
.list {
    position: relative;
    left: 0;
    height: 400px;
    overflow: auto;
    z-index: 10;
    border: 1px solid #eaeaea;
    background: #fff;
    box-sizing: border-box;
    padding: 0 10px;
}
.list h3 {
    font-size: 16px;
    color: #333;
}
.list ul {
    padding: 0 0 0 10px;
    margin: 0;
}
.list li {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0 10px;
}
.list li.active {
    background: rgba(0, 0, 0, 0.1);
    border-left: 1px solid #f00;
}
.list li p {
    height: 38px;
    line-height: 38px;
    margin: 0;
    font-size: 14px;
    color: #666;
}
.list li span {
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    font-size: 13px;
    color: #fff;
    background: #38aadd;
    border-radius: 50%;
    text-align: center;
    line-height: 25px;
    margin-top: 7px;
    margin-right: 6px;
}
.list li:hover {
    background: rgba(0, 0, 0, 0.1);
}
.list table {
    width: 100%;
    font-size: 14px;
    color: #666;
    text-align: center;
    border-collapse: collapse;
}
.list tr {
    height: 36px;
}
.list th,
.list td {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.scroll-wrap {
    height: 340px;
    overflow-y: scroll;
}
</style>